<template>
  <div class="home wrapper">
    <div class="header_top ">
      <!-- 头部 star  -->
      <div class="header">
        <router-link tag="a" to="/search?id=/home">
          <div class="inp" @click="change">输入你想听的故事</div>
        </router-link>
        <div class="label">
          <a @click="favorite">
            <img :src="require('../assets/img/iv_shoucan.png')" alt=""  />
          </a>
          <a @click="History">
            <img :src="require('../assets/img/iv_jilu.png')" alt="" />
          </a>
        </div>
      </div>
      <!-- 头部 end   -->
      <!-- 头部图片 star  -->
      <div class="bigimg">
        <img :src="require('../assets/img/iv_shouye_banner.png')" alt="" />
      </div>
      <!-- 头部图片 end   -->
    </div>
      <!-- 类型 star  -->
      <div class="type">
        <ul>
          <li v-for="item in typeLists" :key="item.id">
            <a @click="Jump(item.id)">
              <div class="img">
                <img :src="item.img" alt="" />
              </div>
              <p>{{ item.title }}</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 类型 end   -->
      <!-- 类型2 star -->
      <div class="typetwo">
        <van-tabs v-model="active" animated>
          <van-tab
            v-for="item in typetwoLists"
            :key="item.id"
            :title="item.title"
          >
            <!-- 优选 star  -->
            <div class="prefer">
              <ul>
                <li v-for="items in item.listen" :key="items.id" @click="listId(item.id,items.id)">
                  <div >
                    <div class="img">
                      <img :src="items.img" alt="" />
                      <div class="vip"></div>
                    </div>
                    <p>{{ items.name}}</p>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 优选 end   -->
          </van-tab>
        </van-tabs>
      </div>
      <!-- 类型2 end  -->
    
  </div>
</template>

<script>
import {getJsonData} from "../api/home.js"
import { getJsonhomeType } from "../api/homeType.js";
export default {
 props: ["listIds", "listenId","timeleft"],
  data() {
    return {
      active: 0,
      typeLists: null,
      typetwoLists: null,
      sleeplist:[],
    };
  },
  methods:{
    listId(id,listenId){
      this.$emit("list-id",[id,listenId])
    },
    change(){
      this.$emit('change');
    },
    Jump(id){
      if(id!=1003){
        this.$router.push("/homeType?routers=/home&id="+ id);
      }else if(id==1003){
        if(this.listIds!=1003 ){
          var index = parseInt(Math.random() * this.sleeplist.length);
          this.$emit("list-id", [1003, this.sleeplist[index].id]);

        }
        this.$emit("sleep",true)
      }
    },
    favorite(){
      this.$emit("favorite")
      this.$router.push("/collection?rou=/home");
    },
    History(){
      this.$emit("History")
      this.$router.push("/playHistory?rou=/home");
    }
  },
  created(){
    getJsonData().then(data=>{
      console.log(data);
      this.typeLists = data.typeLists;
      this.typetwoLists=data.typetwoLists
    })
    getJsonhomeType().then((data) => {
      let list = data.homeTypeLists.filter(item=>item.id==1003);
      console.log(list);
      this.sleeplist=list[0].listen
    });
  },
  // watch:{
  //   "timeleft":function(){
  //     if(this.timeleft==30)
  //     this.$router.push("/member");
  //   }
  // }
};
</script>

<style lang="scss" scoped>
.home,.wrapper {
  background-color: #f4f4f4;
  height: 100%;
  .header_top {
    width: 100%;
    height: 150px;
    background: url(../assets/img/iv__top_title_bg.png) no-repeat;
    background-size: 100% 150px;
  }
  .header {
    height: 30px;
    padding: 18px 23px;
    display: flex;
    justify-content: space-between;
    & > a {
      display: block;
      flex: 1;
      width: 222px;
      height: 28px;
    }
    .inp {
      background: url(../assets/img/iv_sou.png) 14px 7px no-repeat;
      background-size: 14px;
      line-height: 28px;
      padding-left: 36px;
      font-size: 12px;
      color: #838383;
      background-color: #fff;
      border-radius: 14px;
    }
    img {
      height: 22px;
      display: block;
      padding-left: 18px;
    }
    .label {
      padding: 4px 0;
      display: flex;
    }
  }
  .bigimg {
    padding: 0px 10px 12px 10px;
    display: flex;
    img {
      width: 100%;
      height: 144px;
    }
  }
  .type {
    padding: 0 10px;
    margin-top: 70px;
    ul {
      display: flex;
      li {
        width: 25%;
        text-align: center;
        p {
          font-size: 14px;
          font-weight: bold;
          color: #000;
        }
        img {
          width: 55px;
        }
      }
    }
    img {
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .typetwo {
    padding: 21px 0px 100px;
    .van-tabs ::v-deep .van-tabs__line {
      background-color: #f5c34a;
      width: 56px;
      border-radius: 10px;
      height: 30px;
      z-index: 0;
      bottom: 29px;
    }
    .van-tabs ::v-deep .van-tab {
      z-index: 1;
      height: 30px;
      font-size: 13px;
      color: #787878;
      line-height: 30px;
    }
    .van-tabs ::v-deep .van-tabs__nav{
      background-color: #f4f4f4;
    }
    .van-tabs ::v-deep .van-tabs--line .van-tabs__wrap {
      height: 30px;
    }
    .van-tabs ::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  .prefer {
    padding: 0 1px;
    // padding-bottom: 85px;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        width: calc(100% / 3);
        padding: 0 0px 7px;
        .img {
          padding: 0 7px;
          position: relative;
        }
        p {
          padding: 6px 14px 0;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
    .img {
      img {
        width: 100%;
        border-radius: 8px;
      }
    }
    .vip {
      background: url(../assets/img/ic_shouye_vip.png) no-repeat;
      width: 38px;
      height: 15px;
      background-size: 100%;
      position: absolute;
      top: 0;
      left: 7px;
    }
  }
  
  
}
</style>
